<script setup>
import { Sunny, Moon } from '@element-plus/icons-vue'
</script>

<template>
  <main class="home-container">
    <div class="welcome-card">
      <h1>算法可视化学习平台</h1>
      <p class="subtitle">通过交互式可视化，直观理解算法原理与执行过程</p>

      <div class="features">
        <div class="feature-item">
          <el-icon :size="24" color="var(--el-color-primary)">
            <Sunny />
          </el-icon>
          <h3>直观演示</h3>
          <p>动态展示算法每一步的执行过程</p>
        </div>

        <div class="feature-item">
          <el-icon :size="24" color="var(--el-color-primary)">
            <Moon />
          </el-icon>
          <h3>多种算法</h3>
          <p>涵盖常见排序、搜索等基础算法</p>
        </div>
      </div>

      <div class="start-guide">
        <h2>开始探索</h2>
        <p>点击左侧菜单选择算法，观察可视化效果</p>
        <p>可调整数据大小和速度，获得最佳学习体验</p>
      </div>
    </div>
  </main>
</template>

<style scoped>
.home-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 20px;
}

.welcome-card {
  max-width: 800px;
  padding: 40px;
  background-color: var(--color-background-soft);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  color: var(--el-color-primary);
  margin-bottom: 16px;
}

.subtitle {
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 40px;
}

.features {
  display: flex;
  justify-content: space-around;
  margin: 40px 0;
}

.feature-item {
  flex: 1;
  padding: 20px;
  max-width: 250px;
}

.feature-item h3 {
  margin: 16px 0 8px;
  color: var(--el-color-primary);
}

.start-guide {
  margin-top: 40px;
  padding: 20px;
  background-color: var(--color-background-mute);
  border-radius: 8px;
}

.start-guide h2 {
  margin-bottom: 12px;
  color: var(--color-text);
}
</style>
